<template>
  <div class="preWorkBox">
    <Suspend v-if="visible" ref="suspend" v-on:myself="myDefine"></Suspend>
    <!-- 关键件绑定 -->
    <div class="snYard-content">
      <div class="contentDiv">
        <el-alert title="成品改制时，不需要此操作，请点跳过！！！" type="warning" show-icon style="font-size: 20px"></el-alert>
        <el-form ref="form" class="perForm" :model="form" :rules="rules" label-width="300px" size="medium"
          style="margin: 15px 0 0 20px">
          <el-form-item label="物料绑定操作:" prop="radio">
            <el-radio v-model="form.radio" label="1" @change="radioChange">是</el-radio>
            <el-radio v-model="form.radio" label="0" @change="radioChange">否</el-radio>
          </el-form-item>

          <el-form-item label="SN码:" prop="sn">
            <el-input id="scanner-input" v-model="form.sn" type="textarea" placeholder="输入SN码"
              :autosize="{ minRows: 2, maxRows: 5 }" style="width: 400px; height: 50px" @input="snbutton" />
          </el-form-item>

          <el-form-item label="序列号:" prop="serial">
            <el-input id="serial-input" v-model="form.serial" type="textarea" placeholder="输入序列号码"
              :autosize="{ minRows: 2, maxRows: 5 }" style="width: 400px; height: 50px" @input="serialbutton" />
          </el-form-item>
        </el-form>
        <div class="sn_box" v-if="material">
          <div>
            <span>SN码：</span>
            <!-- <span>{{ snCode }}</span> -->
            <span>{{ showSnCode }}</span>
          </div>
          <div>
            <span>报工开始时间：</span>
            <span>{{ parseTime(startReporting) || "--" }}</span>
            <span style="margin-left: 20px">报工结束时间：</span>
            <span>{{ parseTime(finishReporting) || "--" }}</span>
          </div>
          <div v-if="material.length != 0">
            <span>物料列表</span>
            <el-table :data="materialList" row-key="materialList">
              <el-table-column label="物料编号" width="150" align="center" prop="itemCode" />
              <el-table-column label="物料名称" width="150" align="center" prop="itemName" />
              <el-table-column label="物料规格" width="150" align="center" prop="specification" />
              <el-table-column label="数量" width="150" align="center" prop="jdyNumerator||quantity">
                <template slot-scope="scope">
                  {{
                    scope.row.jdyNumerator + scope.row.unitOfMeasure ||
                    scope.row.quantity + scope.row.unit
                  }}
                </template>
              </el-table-column>
              <el-table-column label="绑定数量" width="150" align="center" prop="realQuantity">
                <template slot-scope="scope">
                  {{
                    scope.row.realQuantity != null
                      ? scope.row.realQuantity + scope.row.unitOfMeasure
                      : ""
                  }}
                </template>
              </el-table-column>
              <el-table-column label="物料序列号" width="150" align="center" prop="snCodeItem" />
              <!-- <el-table-column
                label="批次号"
                width="150"
                align="center"
                prop="batchCode"
              />-->
              <el-table-column label="状态" align="center" prop="astatus" width="80">
                <template slot-scope="scope">
                  <span>
                    <i class="el-icon-circle-check" v-if="scope.row.astatus === true"
                      style="color: green; font-size: 26px"></i>
                    <i v-if="scope.row.status === false" class="el-icon-close"></i>
                  </span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="是否欠料" width="100">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.isShortMaterial"></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div>
            <p style="color: red" v-for="(item, i) in checkObj" :key="i">
              物料编号为{{ item.itemCode }}的{{ item.itemName }}缺少物料
              {{ item.itemNumber }}{{ item.unitOfMeasure }}
            </p>
            <!-- <p style="color: red;" v-for="(item,index) in checkObj" :key="index">
              
            </p>-->
            <p style="color: green" v-if="checkBool">报工成功</p>
          </div>
        </div>
      </div>
    </div>
    <div class="dialog_footer">
      <el-button @click="resetBtn" style="font-size: 24px">重置当前数据</el-button>
      <el-button type="primary" style="font-size: 24px" @click="submitForm" :disabled="disabledSubmitBtn">提
        交</el-button>
      <!-- :disabled="disabledSubmit || disabledList || submitBool" -->
      <el-button type="primary" style="font-size: 24px" @click="submitReport" :disabled="disabledReport">报 工</el-button>
      <el-button type="primary" style="font-size: 24px" @click="skip">跳过</el-button>
      <el-button type="primary" style="font-size: 24px" @click="suspend" :disabled="suspendBool">暂停</el-button>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="暂停确定框" width="30%">
      <el-form ref="remarkForm" :rules="remarkRules">
        <el-form-item label="责任部门:" prop="deptId">
          <el-col :span="12">
            <el-select v-model="remarkForm.deptId" placeholder="请选择责任部门">
              <el-option v-for="item in processOptions" :key="item.deptId" :label="item.deptName"
                :value="item.deptId"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="异常类型:" prop="exceptionType">
          <el-col :span="12">
            <el-select v-model="remarkForm.exceptionType" placeholder="请选择异常类型">
              <el-option v-for="item in exceptionList" :key="item.value" :label="item.label"
                :value="item.value"></el-option>
            </el-select>
          </el-col>
        </el-form-item>

        <el-form-item label="异常工时原因:" prop="remark">
          <el-col :span="12">
            <el-input v-model="remarkForm.remark" placeholder="请输入异常工时原因"></el-input>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button @click="handleConfirm" type="primary">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// failsafeList  13008
import {
  failsafeList,
  failsafeCheck,
  failsafe,
  failsafeSubmitWork,
  proFeedback,
  addInfo,
  skipstep,
  listDept,
  getStartReporting,
} from "@/api/apppro/index";
import Suspend from "./suspend.vue";
export default {
  name: "snYard",
  components: {
    Suspend,
  },
  props: {
    formObj: Object,
    snCode: String,
  },
  data() {
    return {
      showSnCode: '',//2025-3-14 用来展示输入的snCode
      isKey: false,
      //物料序列号扫码的次数
      num: 0,
      form: {
        radio: "1",
      },
      material: false,
      itemCode: "",
      // 序列号
      snCodeItem: "",
      rules: {
        itemCode: [
          { required: true, message: "物料/产品编码不能为空", trigger: "blur" },
          {
            max: 64,
            message: "物料/产品编码长度必须小于64个字符",
            trigger: "blur",
          },
        ],
      },
      remarkRules: {
        // remark: [{ required: true, message: "请输入异常工时原因", trigger: "blur" }],
        deptId: [
          { required: true, message: "请选择责任部门", trigger: "blur" },
        ],
        exceptionType: [
          { required: true, message: "请选择异常类型", trigger: "blur" },
        ],
      },
      materialList: [],
      checkObj: [],
      disabledSubmitBtn: false,
      disabledSubmit: false,
      disabledList: true,
      disabledReport: true,
      // 报工成功
      checkBool: false,
      //提交按钮新加校验
      submitBool: false,
      //提交按钮 加的校验
      materialBool: true,
      //暂停按钮
      suspendBool: false,
      //是否出现暂停页面
      visible: false,
      //是否出现暂停对话框
      dialogVisible: false,
      startReporting: null,
      finishReporting: null,
      //暂停 备注
      remarkForm: {
        remark: "", //备注
        deptId: "", //责任部门
        exceptionType: "", //异常类型
      },
      //责任部门的数组
      processOptions: [],
      //异常类型的数组
      exceptionList: [
        {
          value: "培训",
          label: "培训",
        },
        {
          value: "开会",
          label: "开会",
        },
        {
          value: "午休",
          label: "午休",
        },
        {
          value: "下班",
          label: "下班",
        },
        {
          value: "晚饭",
          label: "晚饭",
        },
        {
          value: "休假",
          label: "休假",
        },
        {
          value: "其他",
          label: "其他",
        },
      ],
    };
  },
  // watch:{
  //   snCode: {
  //     handler(newVal,oldVal){
  //       this.form.sn = newVal
  //       this.disabledReport = true;
  //         this.disabledSubmit = false;
  //         this.disabledList = true;
  //         this.checkBool = false;

  //         //赋值给v-model
  //         this.form.sn = newVal;
  //         this.submitBool = false;
  //         console.log(555,this.formObj)
  //         this.getList(this.form.sn);
  //     },
  //     immediate: false
  //   }
  // },
  created() {
    console.log(this.snCode, "上料放错");
  },
  methods: {
    handleChangeIsShortMaterial(value, row) {
      console.log("value", value);
      console.log("row", row);
      console.log("materialList", this.materialList);
    },
    getList(e) {
      console.log("=======开始获取this.formObj信息=======");
      console.log(this.formObj);
      let params = { ...this.formObj };
      //接口需要的数据：String snCode, String processId, String productId, String workorderCode
      params.productId = this.formObj.productId;
      params.processId = this.formObj.processId;
      params.workorderId = this.formObj.workorderId

      params.processCode = this.formObj.processCode;
      params.productCode = this.formObj.productCode;
      params.snCode = e;
      console.log(params, "===== this.formObj=====");
      failsafeList(params).then((response) => {
        console.log(response, "输入SN调接口的res");
        if (response.code == 200) {
          this.$modal.msgSuccess(response.msg);
          this.snCodeItem = "";
          this.materialList = response.data;
          this.material = true;
          this.form.sn = "";
          // this.snCode = e;
          if (this.form.radio == "1") {
            //选择需要扫物料了，物料列表为空返回true，不是空就false
            console.log(this.materialList.length, "this.materialList.length");
            this.materialBool = this.materialList.length == 0 ? true : false;
          } else {
            this.materialBool = this.materialList.length == 0 ? false : true;
          }
          //suspendStatus为false的时候 是暂停状态
          if (response.suspendStatus == false) {
            this.visible = true;
            this.$nextTick(() => {
              this.$refs.suspend.init(this.formObj, e);
            });
          }
        }
      });
    },
    getListDept() {
      listDept().then((res) => {
        console.log(res, "查询部门的res");
        if (res.code == 200) {
          this.processOptions = res.data.filter((item) => item.orderNum === 1);
          console.log(this.processOptions, "this.processOptions");
        }
      });
    },
    // 获取时间
    getTime(sn) {
      let params = {};
      params.workstationId = this.formObj.workstationId;
      params.workshopId = this.formObj.workshopId;
      params.processId = this.formObj.processId;
      params.workorderId = this.formObj.workorderId;
      params.lineId = this.formObj.lineId;
      if (sn) {
        params.snCode = sn;
      } else {
        params.snCode = this.snCode
      }

      getStartReporting(params).then((res) => {
        if (res.code == 200) {
          this.startReporting = res.data?.startReporting || null;
          this.finishReporting = res.data?.finishReporting || null;
        }
      });
    },
    // 判断物料码
    itemJudge(e) {
      let params = {};
      params.productId = this.formObj.productId;
      params.processId = this.formObj.processId;
      params.routeId = this.formObj.routeId;
      params.snCode = this.snCode;
      params.snCodeItem = e;
      console.log(params, "params");
      failsafeCheck(params).then((res) => {
        console.log(res, "序列号res");
        if (res.contains) {
          this.material = true;
          let index = this.materialList.findIndex(
            (item) => item.itemCode === res.itemCode
          );
          let nums = 0;
          this.materialList.forEach((item, Index) => {
            if (item.itemCode == res.itemCode) {
              nums = this.materialList[Index].jdyNumerator;
            }
          });
          console.log(index, nums, "index", "nums");
          if (this.materialList[index].snCodeItem != undefined) {
            var codeList = this.materialList[index].snCodeItem.split(",");
            //console.log(codeList,'codeList');
            if (codeList.length >= nums) {
              this.$modal.msgError("物料序列号已达到绑定数量");
              return;
            }

            try {
              codeList.forEach((ITEM, index) => {
                if (this.snCodeItem == ITEM) {
                  //执行完1 2 之后就报错，就跳出循环了
                  throw new Error("ending"); //报错，就跳出循环
                }
              });
            } catch (e) {
              if (e.message == "ending") {
                this.$modal.msgError("请勿重复扫描物料序列号");
                return;
              }
            }
            if (res.code == 200) {
              if (this.materialList[index].isKey) {
                if (this.materialList[index].snCodeItem) {
                  let snCodeArr =
                    this.materialList[index].snCodeItem.split(",");
                  for (let i = 0; i < snCodeArr.length; i++) {
                    if (snCodeArr[i] === res.salseItem.snCode) {
                      return this.$message.error(
                        "关键器件绑定的物料序列号不能重复！"
                      );
                    }
                  }
                }
              }
              //this.num++
              this.materialList[index].snCodeItem =
                this.materialList[index].snCodeItem +
                "," +
                res.salseItem.snCode;
              this.materialList[index].batchCode =
                this.materialList[index].batchCode +
                "," +
                res.salseItem.batchCode;

              //赋值之后清空序列号码
              this.form.serial = "";
            }
          } else {
            // if(this.num == nums){
            //   this.$modal.msgError("物料序列号已达到绑定数量")
            //   return
            // }
            if (res.code == 200) {
              //this.num++
              this.$set(
                this.materialList[index],
                "snCodeItem",
                res.salseItem.snCode
              );
              this.$set(
                this.materialList[index],
                "batchCode",
                res.salseItem.batchCode
              );
              //赋值之后清空序列号码
              this.form.serial = "";
            }
          }
          this.$set(this.materialList[index], "astatus", true);
          let list = this.materialList.filter((_) => _.astatus == true);
          if (list.length !== this.materialList.length) {
            this.disabledList = true;
          } else {
            this.disabledList = false;
          }
        } else {
          // this.checkObj.forEach(item=>{
          //   if(item!=""){
          //     console.log(item ,'item');
          //     this.$modal.msgError("物料序列号"+this.snCodeItem +"不在该工序对应的物料清单中");
          //   }
          // })
          this.$modal.msgError(
            "物料序列号" + this.snCodeItem + "不在该工序对应的物料清单中"
          );
        }
        this.itemCode = res.itemCode;
        // this.form.sn = "";
      });
    },
    //sn扫码函数
    snbutton(e) {
      var myInputOrder = document.getElementById("scanner-input");
      myInputOrder.onkeydown = (even) => {
        console.log(even, "=====e=====");
        if (even.key == "Enter") {
          // this.reset()
          this.disabledReport = true;
          this.disabledSubmit = false;
          this.disabledList = true;
          this.checkBool = false;
          //赋值给v-model
          this.form.sn = e ? e.trim() : '';
          this.showSnCode = e ? e.trim() : '';
          // this.snCode = e;
          this.submitBool = false;
          this.getList(this.form.sn);
          //每次扫描SN码时把物料序列号次数清空
          this.num = 0;
          this.getTime(this.form.sn);
        }
      };
    },
    //序列号扫码函数
    serialbutton(e) {
      console.log(e, "序列号扫码的e");
      var myInputOrder = document.getElementById("serial-input");
      myInputOrder.onkeydown = (even) => {
        if (even.key == "Enter") {
          console.log(e, "eee");
          this.itemJudge(e ? e.trim() : '');
        }
      };
    },
    /* 提交按钮 */
    submitForm() {
      this.checkObj = []
      if (!this.startReporting) {
        return this.$message.error("没有报工开始时间，请确认SN码是否有误哟！");
      }
      for (let i = 0; i < this.materialList.length; i++) {
        if (!this.materialList[i].isShortMaterial) {
          if (!this.materialList[i].astatus) {
            return this.$message.error("请扫码绑定物料！");
          }
          let num =
            this.materialList[i].realQuantity != null
              ? this.materialList[i].realQuantity +
              this.materialList[i].unitOfMeasure
              : 0;
          let snCodeNum = 0;
          if (!this.materialList[i].snCodeItem) {
            snCodeNum = 0;
          } else {
            snCodeNum = this.materialList[i].snCodeItem.split(",").length;
          }
          if (this.materialList[i].isKey) {
            if (snCodeNum < num) {
              return this.$message.error(
                "关键器件绑定物料的数量应和数量一致！"
              );
            }
          } else {
            if (snCodeNum < 1) {
              return this.$message.error("请扫码绑定物料！");
            }
          }
        }
      }
      let params = { ...this.formObj };
      params.exceptionId = this.formObj.exceptionId;
      params.processName = this.formObj.processName;
      params.processCode = this.formObj.processCode;
      params.itemCode = this.formObj.productCode;
      params.itemName = this.formObj.productName;
      params.workstationCode = this.formObj.workstationCode;
      params.workorderCode = this.formObj.workorderCode;
      params.specification = this.formObj.productSpc;
      params.productId = this.formObj.productId;
      params.processId = this.formObj.processId;
      params.routeId = this.formObj.routeId;
      params.workorderId = this.formObj.workorderId;
      params.workorderName = this.formObj.workorderName;
      params.workorderNumber = this.formObj.jdyNumerator;
      params.snCode = this.snCode;
      params.itemList = this.materialList;
      delete params.status;
      console.log(params.itemList, "params.itemList");
      //处理数据
      params.itemList.forEach((item) => {
        if (!item.snCodeItem) {
          item.realQuantity = 0
        } else {
          //扫描成功的序列号数量
          item.realQuantity = item.snCodeItem.split(",").length;
        }
        item.unit = item.unitOfMeasure;
        item.quantity = item.jdyNumerator + item.unitOfMeasure;
      });
      console.log(params.itemList, "提交的params.itemList");
      //走的是需要全部物料的接口
      console.log(this.form.radio, "this.disabledList");
      this.disabledSubmitBtn = true;
      if (this.form.radio || this.form.sn || this.form.serial) {
        this.$confirm("确定提交吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //提交调用接口
            if (this.form.radio == "1") {
              params.material = 1;
              failsafe(params).then((res) => {
                if (res.code == 200) {
                  this.$modal.msgSuccess(res.msg);
                  this.disabledReport = false;
                  this.disabledSubmitBtn = false;
                  this.submitBool = true;
                  this.materialList.forEach((item) => {
                    const snCodeItemNum = item.snCodeItem ? item.snCodeItem.split(",").length : 0
                    if (item.jdyNumerator != snCodeItemNum) {
                      let Object = {};
                      //物料编号
                      Object.itemCode = item.itemCode;
                      //物料名称
                      Object.itemName = item.itemName;
                      //缺料数量
                      Object.itemNumber =
                        item.jdyNumerator - snCodeItemNum;
                      //物料单位
                      Object.unitOfMeasure = item.unitOfMeasure;
                      this.checkObj.push(Object);
                    }
                  });
                  this.getTime();
                  this.$modal.msgSuccess("SN码：" + this.snCode + "提交成功")
                } else {
                  this.$modal.msgError("SN码：" + this.snCode + "提交失败！")
                  this.disabledSubmitBtn = false;
                  console.log('提交错误', res)
                }
              }).catch(() => {
                this.disabledSubmitBtn = false;
              });
            } else {
              //走的是不需要全部物料的接口
              params.material = 0;
              failsafeSubmitWork(params).then((res) => {
                console.log(res, "不需要全物料的提交res");
                if (res.code == 200) {
                  this.$modal.msgSuccess(res.msg);
                  this.disabledReport = false;
                  this.disabledSubmitBtn = false;
                  this.submitBool = true;
                  this.materialList.forEach((item) => {
                    const snCodeItemNum = item.snCodeItem ? item.snCodeItem.split(",").length : 0
                    if (item.jdyNumerator != snCodeItemNum) {
                      let Object = {};
                      //物料编号
                      Object.itemCode = item.itemCode;
                      //物料名称
                      Object.itemName = item.itemName;
                      //缺料数量
                      Object.itemNumber =
                        item.jdyNumerator - snCodeItemNum;
                      //物料单位
                      Object.unitOfMeasure = item.unitOfMeasure;
                      this.checkObj.push(Object);
                    }
                  });
                  this.getTime();
                  this.$modal.msgSuccess("SN码：" + this.snCode + "提交成功")
                }
                else {
                  this.$modal.msgError("SN码：" + this.snCode + "提交失败！")
                  this.disabledSubmitBtn = false;
                  console.log('提交错误', res)
                }
              }).catch(() => {
                this.disabledSubmitBtn = false;
              });
            }
            //提交调用接口end
          })
          .catch(() => {
            this.disabledSubmitBtn = false;
          });
      }


    },
    /* 重置按钮 */
    resetBtn() {
      if (this.form.radio || this.form.sn || this.form.serial) {
        this.$confirm("确定重置当前页面的数据吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.reset()
          })
          .catch(() => { });
      }
    },
    reset() {
      this.form = {
        sn: undefined,
      };
      this.material = false;
      this.checkObj = [];
      this.materialList = [];
      // this.snCode = "";
      this.showSnCode = ""
      console.info('this.snCode', this.snCode)
      this.snCodeItem = "";
      this.resetForm("form");
      this.disabledReport = true;
      this.disabledSubmit = false;
      this.disabledList = true;
      this.checkBool = false;
      this.materialBool = true;
      this.suspendBool = false;
    },
    statusJudge(row) {
      console.log(row.status, "===========status====");
      console.log(this.materialList);
      let str = "";
      if (row.status === true) {
        str = (
          <i
            class="el-icon-circle-check"
            style="color:green;font-size:20px"
          ></i>
        );
      } else if (row.status === false) {
        str = <i class="el-icon-close"></i>;
      } else {
        ("--");
      }
      return str;
    },
    // 报工
    submitReport() {
      let params = { ...this.formObj };
      params.itemCode = this.formObj.productCode;
      params.itemName = this.formObj.productName;
      params.itemId = this.formObj.productId;
      params.snCode = this.snCode;
      delete params.status;
      proFeedback(params).then((res) => {
        console.log(res, "=======res=======");
        this.$modal.msgSuccess(res.msg);
        this.disabledReport = true;
        this.disabledList = true;
        this.submitBool = true;
        this.checkBool = true;
        this.getTime();
        // this.reset()
        /* 2025-3-10 新增提交成功返回开始 */
        /* setTimeout(() => {
          this.$router.push({ path: "/appPro/preWorkPreparation" }).catch(() => { });
        }, 2000); */
      });
    },
    //radioChange
    radioChange(value) {
      console.log(value, "radioValue");
      if (this.form.radio == "1") {
        //选择需要扫物料了，物料列表为空返回true，不是空就false
        this.materialBool = this.materialList.length == 0 ? true : false;
      } else {
        this.materialBool = this.materialList.length == 0 ? false : true;
      }
    },
    //暂停按钮
    suspend() {
      this.dialogVisible = true;
      this.getListDept();
    },
    //跳过按钮
    skip() {
      let params = { ...this.formObj };
      params.material = 0;
      params.skip = 0;
      skipstep(params).then((res) => {
        if (res.code == 200) {
          this.$modal.msgSuccess("跳过成功");
          this.$router.push("/appPro/preWorkPreparation");
        }
      });
    },
    //暂停确定的函数
    handleConfirm() {
      // if(!this.remarkForm.remark){
      //   this.$modal.msgError("请输入备注")
      //   return
      // }
      this.$modal.confirm("是否确认暂停工序？").then(() => {
        let params = { ...this.formObj };
        params.snCode = this.snCode;
        params.remark = this.remarkForm.remark;
        params.deptId = this.remarkForm.deptId;
        params.exceptionType = this.remarkForm.exceptionType;
        addInfo(params).then((res) => {
          console.log(res, "添加暂停的res");
          if (res.code == 200) {
            //禁止重复暂停
            this.suspendBool = true;
            //显示 暂停页面
            this.visible = true;
            this.$modal.msgSuccess(res.msg);
            this.$nextTick(() => {
              this.$refs.suspend.init(this.formObj, this.snCode);
            });
          }
        });
      });
    },
    //暂停 取消的函数
    handleCancel() {
      this.dialogVisible = false;
    },
    //子组件传过来的值
    myDefine(myself) {
      this.suspendBool = myself;
      this.visible = myself;
    },
  },
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.perForm ::v-deep .el-form-item__label {
  font-size: 20px;
}

.contentDiv ::v-deep .el-alert__title {
  font-size: 20px;
}

.contentDiv ::v-deep .el-alert__icon {
  font-size: 20px;
}

.snYard-content {
  // margin-top: 20px;
  // text-align: center;
  display: flex;
  justify-content: center;
  // width: 100%;
}

.dialog_footer {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  // display: flex;
  // justify-content: center;
}

.sn_box {
  text-align: left;
  font-size: 20px;
  line-height: 40px;
  overflow-x: auto;
}
</style>